<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/loginAndRegister.css">
    <script src="https://kit.fontawesome.com/e91f25b25e.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <title>管理员注册</title>
</head>
<body>
<div class="w">
    <div class="main-frame">
        <div class="main-frame-left">
            <img src="images/index.png" alt="" class="login-image">
        </div>

        <div class="main-frame-right">
<!--            <a href="allBook" class="allBook-link">游客</a>-->
            <h2 class="form-title">创建账户</h2>
            <p class="form-welcome">---------    宠物商店后台管理系统欢迎您的注册    ---------</p>
            <div class="form">
                <form action="#" method="post">
                    <div class="form-item-errorMsg">
                        <!-- <i class="fa fa-light fa-circle-info"></i> -->
                        <label class="form-errorMsg-msg" id="usernameMsg" th:text="${loginMsg}"></label>
                    </div>
                    <div class="form-item">
                        <label class="form-item-icon">
                            <i class="fa fa-light fa-user"></i>
                        </label>
                        <input type="text" class="form-item-input" id="registerUsername" placeholder="请输入用户名" autocomplete="off">
                    </div>
                    <div class="form-item">
                        <label class="form-item-icon">
                            <i class="fa fa-light fa-lock"></i>
                        </label>
                        <input type="password" class="form-item-input" id="registerPassword" placeholder="请输入密码" autocomplete="off">
                    </div>
                    <div class="form-item">
                        <label class="form-item-icon">
                            <i class="fa fa-solid fa-envelope"></i>
                        </label>
                        <input type="text" class="form-item-input email" name="email" id="email" placeholder="请输入邮箱" autocomplete="off">
                    </div>
                    <div class="form-item">
                        <label class="form-item-icon">
                            <i class="fa fa-solid fa-bell"></i>
                        </label>
                        <input type="text" class="form-item-input verify-input" name="code" id="code" placeholder="请输入验证码" autocomplete="off">
                        <div class="form-item-errorMsg">
                            <!-- <i class="fa fa-light fa-circle-info"></i> -->
                            <label class="form-errorMsg-msg" id="codeMsg"></label>
                        </div>
                        <button type="button" onclick="send()" class="btn getVerify-button">获取验证码</button>
                    </div>

                    <input type="submit" value="注册" class="btn form-button"><br>
                    <div class="form-loginlink">
                        <span class="login">已有账户？→</span>
                        <a href="loginForm"><span class="link">登录</span></a>
                    </div>

                </form>
            </div>
        </div>

    </div>
</div>
<script src="js/loginRegister.js"></script>
<script>
    function send() {
        var email = document.getElementById('email').value;
        if (email) {
            fetch('/send', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: 'email=' + email
            })
                .then(response => response.text())
                .then(message => alert(message))
                .catch(error => console.error(error));
        } else {
            alert('请输入邮箱地址');
        }
    }
</script>
</body>
</html>